<template>
  <div class='short-video-detail'>
    <!-- 取消掉底部 头部加个返回箭头 和打开APP(和首页一样的那个)-->
    <!-- 点赞和评论的数字都要再判断一下 -->
    <div class="play-wrapper z-10">
      <div
        class="flex-center-wrapper"
        :style="{backgroundImage:'url('+shortVideoDetail.bgimg+')',backgroundRepeat:'no-repeat',backgroundColor:'black'}"
      >
        <div
          class="play-btn"
          :style="{opacity:!play?'1':'0'}"
          @click="changePlay"
          ref="imgRef"
        ></div>
      </div>
    </div>
    <div class="info-wrapper z-100">
      <div class="title">{{shortVideoDetail.title}}</div>
    </div>
    <div
      class="right-wrapper"
      :style="{zIndex:play?'102':'100'}"
    >
      <div><a
          href=""
          class="link"
        ><img
            class="header-pic"
            :src="shortVideoDetail.upimg"
            alt=""
            width="96"
            height="96"
          ></a><a
          class="link"
          href=""
        >
          <div class="icon-btn">
            <!-- <img
              src="http://p1.meituan.net/moviemachine/5377c2c03dacf20b6e286e3e72dd57911272.png"
              alt=""
            > -->
            <i
              :class="['iconfont','icon-xinaixin-fuben',flag?'aiActive':'ai']"
              @click.prevent="changeLike"
            ></i>
          </div>
          <div class="text">{{shortVideoDetail.likes}}</div>
        </a>
        <!-- <div class="icon-btn">
          <img
            src="http://p0.meituan.net/moviemachine/8bdff1556f02f8f4a209643aba9b1fcf1636.png"
            alt=""
          > -->
        <!-- <i class="icon-font icon-pinglun1 comment"></i> -->
        <!-- </div> -->
        <van-cell
          class="icon-btn pinglun"
          @click="show = true"
        />
        <van-action-sheet
          v-model="show"
          title="评论(12)"
          @closed="quxiao"
          close-on-click-overlay
        >
          <div class="content">
            <van-skeleton
              title
              avatar
              :row="3"
              avatar-size="80px"
              animated
              :loading="loading"
            >
              <div class="one">
                <div class="real">

                  <img
                    src="http://p0.meituan.net/moviemachine/5e9f6c90bdddc8c23fe877d7f821a09c73695.png"
                    alt=""
                  >
                  <div class="all">
                    <div class="l">
                      <span class="uname">南山</span>
                      <span class="level">LV1</span>
                      <span class="right">...</span>
                    </div>
                    <p>
                      <span class="time">2021/4/24 02:52:23</span>
                      <span class="place">上海</span>
                    </p>
                    <p class="say">好好好爱好</p>
                  </div>
                </div>
                <div class="bot">
                  <div class="bot1"></div>
                  <i class="iconfont icon-dianzan_active"></i>
                  <span class="liking">赞</span>
                  <i class="iconfont icon-pinglun1"></i>
                  <span class="reply">回复</span>
                </div>
              </div>
              <div class="one">
                <div class="real">

                  <img
                    src="http://p0.meituan.net/moviemachine/5e9f6c90bdddc8c23fe877d7f821a09c73695.png"
                    alt=""
                  >
                  <div class="all">
                    <div class="l">
                      <span class="uname">南山</span>
                      <span class="level">LV1</span>
                      <span class="right">...</span>
                    </div>
                    <p>
                      <span class="time">2021/4/24 02:52:23</span>
                      <span class="place">上海</span>
                    </p>
                    <p class="say">好好好爱好</p>
                  </div>
                </div>
                <div class="bot">
                  <div class="bot1"></div>
                  <i class="iconfont icon-dianzan_active"></i>
                  <span class="liking">赞</span>
                  <i class="iconfont icon-pinglun1"></i>
                  <span class="reply">回复</span>
                </div>
              </div>
              <div class="one">
                <div class="real">

                  <img
                    src="http://p0.meituan.net/moviemachine/5e9f6c90bdddc8c23fe877d7f821a09c73695.png"
                    alt=""
                  >
                  <div class="all">
                    <div class="l">
                      <span class="uname">南山</span>
                      <span class="level">Lv1</span>
                      <span class="right">...</span>
                    </div>
                    <p>
                      <span class="time">2021/4/24 02:52:23</span>
                      <span class="place">上海</span>
                    </p>
                    <p class="say">好好好爱好</p>
                  </div>
                </div>
                <div class="bot">
                  <div class="bot1"></div>
                  <i class="iconfont icon-dianzan_active"></i>
                  <span class="liking">赞</span>
                  <i class="iconfont icon-pinglun1"></i>
                  <span class="reply">回复</span>
                </div>
              </div>
            </van-skeleton>
          </div>
          <div class="send">
            <input type="text">
            <span>发布</span>
          </div>
        </van-action-sheet>
        <div class="text">{{shortVideoDetail.comment}}</div>

        <!-- <div class="icon-btn"> -->
        <!-- <img
              src="http://p0.meituan.net/moviemachine/7e7aaf09a232efb02ff8697deb522d151367.png"
              alt=""
            > -->
        <!-- <i class="iconfont icon-fenxiangfang fenxiang"></i> -->
        <!-- </div> -->
        <van-cell
          class="fenxiang icon-btn"
          @click.prevent="showShare = true"
        />
        <van-share-sheet
          v-model="showShare"
          title="立即分享给好友"
          :options="options"
          @select="onSelect"
        />
        <div class="text">分享</div>
      </div>
    </div>
    <div class="bg-wrapper"></div>
    <video
      :autoplay="play"
      :controls="play"
      v-if="play"
      :src="shortVideoDetail.videosrc"
    ></video>
    <span
      class="back"
      @click="goBack"
    >返回</span>
  </div>
</template>
<script>
import { Toast } from 'vant'
export default {
  mounted() {
    this.loading = false
  },
  data: () => ({
    play: false,
    shortVideoDetail: {},
    flag: false,
    showShare: false,
    loading: true,
    options: [
      [
        { name: '微信', icon: 'wechat' },
        { name: '朋友圈', icon: 'wechat-moments' },
        { name: '微博', icon: 'weibo' },
        { name: 'QQ', icon: 'qq' }
      ],
      [
        { name: '复制链接', icon: 'link' },
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' },
        { name: '小程序码', icon: 'weapp-qrcode' }
      ]
    ],
    show: false,
    actions: [
      { name: '选项一' },
      { name: '选项二' },
      { name: '选项三', subname: '描述信息' }
    ]
  }),
  methods: {
    changePlay() {
      // console.log('播放')
      this.play = !this.play
    },
    goBack() {
      this.$router.go(-1)
    },
    changeLike() {
      this.flag = !this.flag
      if (this.flag) {
        this.shortVideoDetail.likes = Number(this.shortVideoDetail.likes) + 1
      } else {
        this.shortVideoDetail.likes = Number(this.shortVideoDetail.likes) - 1
      }
    },
    onSelect(option) {
      // 这是个事件，没有所谓的默认行为
      // console.log('你点了分享')
      Toast(option.name)
      // 点击之后就将分享框进行隐藏
      this.showShare = false
    },
    quxiao() {
      this.$refs.imgRef.style.zIndex = '102'
      // console.dir(this.$refs.imgRef)
    }
  },
  created() {
    this.shortVideoDetail = this.$route.params
  }
}
</script>

<style lang="scss" scoped>
.short-video-detail {
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
  background-color: #eee;
  .van-action-sheet {
    padding: 0px 16px;
    .van-action-sheet__header {
      border-bottom: 1px solid #ccc;
      height: 40px;
      line-height: 40px;
    }
  }
  .content {
    height: 400px;
    overflow: scroll;
    .one {
      margin-top: 10px;
      padding-bottom: 10px;
      border-bottom: 1px solid #ccc;
      .real {
        display: flex;
        img {
          width: 60px;
          height: 60px;
          border-radius: 50%;
        }
        .all {
          margin-left: 10px;
          .uname {
            font-size: 20px;
            font-weight: bolder;
            font-family: "黑体";
            margin-bottom: 10px;
          }
          .level {
            border: 1px solid lightblue;
            border-radius: 6px;
            display: inline-block;
            padding: 2px 6px;
            margin-left: 20px;
            margin-right: 140px;
            font-size: 10px;
          }
          .right {
            font-size: 30px;
            font-weight: 600;
          }
          .time,
          .place {
            color: #ccc;
            font-size: 18px;
            margin-top: 20px;
          }
          .time {
            margin-right: 10px;
          }
          .say {
            font-size: 18px;
            margin-top: 14px;
            font-weight: bold;
            font-family: "黑体";
          }
        }
      }
    }
    .bot {
      text-align: right;
      .liking,
      .reply {
        margin-right: 10px;
        display: inline-block;
        padding: 8px;
        margin-top: 20px;
      }
    }
    .ping {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
    }
  }
  .send {
    background-color: #fff;
    height: 40px;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    input {
      width: 80%;
      height: 30px;
      background: rgba(204, 204, 204, 0.2);
      border-radius: 14px;
      padding-left: 8px;
    }
    span {
      margin-left: 10px;
      border: 1px solid #ccc;
      border-radius: 14px;
      padding: 2px 12px;
      color: #ccc;
      display: inline-block;
    }
    padding: 6px;
  }
  .play-wrapper {
    height: 100%;
    .flex-center-wrapper {
      background-size: contain !important;
      background-position-x: center !important;
      background-position-y: center !important;
      display: flex;
      width: 100%;
      height: 100%;
      justify-content: center;
      align-items: center;
    }
    .play-btn {
      z-index: 100;
      position: absolute;
      width: 60px;
      height: 60px;
      background: url(https://p1.meituan.net/moviemachine/1602ab135634e5c1e42ef8866bd524c54993.png)
        no-repeat;
      background-size: 100% 100%;
    }
  }
  .z-10 {
    z-index: 10;
  }
  .info-wrapper {
    color: #fff;
    letter-spacing: 0;
    line-height: 24px;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
    width: 280px;
    position: absolute;
    bottom: 100px;
    left: 15px;
    .title {
      font-family: PingFangSC-Medium;
      font-size: 19px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin-bottom: 10px;
    }
  }
  .z-100 {
    z-index: 100;
  }
  .right-wrapper {
    position: absolute;
    right: 15px;
    bottom: 80px;
    width: 48px;
    .header-pic {
      width: 48px;
      height: 48px;
      border-radius: 100%;
      margin-bottom: 26px;
    }
    .ai {
      font-size: 18px;
      color: #fff;
    }
    .aiActive {
      color: rgb(223, 77, 79);
      font-size: 22px;
    }
    .icon-btn {
      width: 48px;
      height: 48px;
      display: flex;
      justify-content: center;
      align-items: center;
      background: rgba(0, 0, 0, 0.42);
      border-radius: 100%;
      margin-bottom: 4px;
      img {
        width: 22px;
        height: 22px;
      }
    }
    .text {
      margin-bottom: 14px;
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: #fff;
      letter-spacing: 0;
      text-align: center;
      text-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
    }
    .fenxiang {
      background: url(http://p0.meituan.net/moviemachine/7e7aaf09a232efb02ff8697deb522d151367.png)
        no-repeat;
      background-size: 50%;
      background-position: center center;
    }
    .pinglun {
      background: url(http://p0.meituan.net/moviemachine/8bdff1556f02f8f4a209643aba9b1fcf1636.png)
        no-repeat;
      background-size: 50%;
      background-position: center center;
    }
  }
  .bg-wrapper {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.72));
  }
  video {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 101;
    object-fit: contain;
  }
  .back {
    color: rgba(255, 255, 255, 0.8);
    font-size: 20px;
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 102;
  }
}
</style>
